<template>
  <transition name="fade" @after-leave="afterLeave">
    <div :class="toastClass" v-show="visible" class="toaster" @click="close">
      <i :class="iClass"></i>
      <div class="toast-message">
        {{message}}
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    props: ['type', 'message', 'fixed', 'autoCloseTime'],
    data () {
      return {
        visible: false
      }
    },
    mounted () {
      if (!this.fixed) {
        setTimeout(() => {
          this.close()
        }, this.autoCloseTime || 5000)
      }
    },
    computed: {
      toastClass () {
        switch (this.type) {
          case 'success':
          case 'error':
          case 'info':
          case 'warning':
            return `toast-${this.type}`
          default:
            throw Error('Toaster type error')
        }
      },
      iClass () {
        switch (this.type) {
          case 'success':
            return 'va-icon-check'
          case 'error':
            return 'va-icon-times'
          case 'info':
            return 'va-icon-info'
          case 'warning':
            return 'va-icon-exclamation'
          default:
            return 'va-icon-info'
        }
      }
    },
    methods: {
      show () {
        this.visible = true
      },
      afterLeave () {
        document.body.removeChild(this.$el)
        this.$destroy()
      },
      close () {
        this.visible = false
      }
    }
  }
</script>
